
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>table-drag-sort-resize samples</title>
    <link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="table-drag-sort-resize.css">
	<link rel="stylesheet" href="sample1.css">
	<link rel="stylesheet" href="sample2.css">
	<link rel="stylesheet" href="sample3.css">
	<link rel="stylesheet" href="sample4.css">
</head>
<body>
	<a href="https://github.com/irhc">
		<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png">
	</a>
	
	<h1>table-<span style="color:#DD1812;">drag</span>-<span style="color:#16A61E;">sort</span>-<span style="color:#0140CA;">resize</span></h1>
	<h5>Dragging (drag'n'drop), resizing and sorting columns of html tables. Simple and small standalone javascript component.</h5>
	<div>
	<p>
	<a href="https://github.com/irhc/table-drag-sort-resize">Repository and description on github</a>
	</p>
	</div>
	<p>
	Move the mouse over the left side of each table header cell and simply resize it to change the width of the table columns. Or move the mouse over the table headers and simply drag'n'drop it to change the order of the table columns. Or move the mouse over the table header cell and simply click it to sort the table column.
	</p>
	<h3>Sample 1</h3>
	Options: distance: 10 (default), minWidth: 30 (default), restoreState: true (default), fixed: false (default)
	
	<table id="sample1" name="sample1" cellpadding="0" cellspacing="0" border="0">
        <thead>
            <tr>
                <th>Name</th>
                <th>&Auml;nderungsdatum</th>
                <th>Typ</th>
                <th>Gr&ouml;&szlig;e</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>libraries</td>
                <td>08.10.2013 12:38</td>
                <td>Dateiordner</td>
                <td></td>
            </tr>
            <tr>
                <td>views</td>
                <td>08.10.2013 12:38</td>
                <td>Dateiordner</td>
                <td></td>
            </tr>
            <tr>
                <td>css</td>
                <td>18.05.2014 11:08</td>
                <td>Dateiordner</td>
                <td></td>
            </tr>
            <tr>
                <td>.htaccess</td>
                <td>03.06.2013 14:29</td>
                <td>HTACCESS-Datei</td>
                <td>1 KB</td>
            </tr>
            <tr>
                <td>config.php</td>
                <td>03.06.2013 14:29</td>
                <td>PHP-Datei</td>
                <td>3 KB</td>
            </tr>
            <tr>
                <td>blank.html</td>
                <td>18.05.2014 11:08</td>
                <td>HTLM-Datei</td>
                <td>1 KB</td>
            </tr>
        </tbody>
    </table>

	<h3>Sample 2 (from <a href="http://akottr.github.io/dragtable/">akottr</a>)</h3>
	Options: distance: 10, minWidth: 60, restoreState: true (default), fixed: true
	
      <table id="sample2" class="sar-table">
        <thead>
          <tr>
            <th>TIME</th>

            <th>%user</th>
            <th>%nice</th>
            <th>%system</th>
            <th>%iowait</th>
            <th>%idle</th>                     
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>12:10:01 AM</td><td>28.86</td><td>0.04</td><td>1.65</td><td>0.08</td><td>69.36</td>
          </tr>
          <tr>
            <td>12:20:01 AM</td><td>26.54</td><td>0.00</td><td>1.64</td><td>0.08</td><td>71.74</td>

          </tr> 
          <tr>
            <td>12:30:01 AM</td><td>29.73</td><td>0.00</td><td>1.66</td><td>0.09</td><td>68.52</td>
          </tr>
        </tbody>
      </table>
	
	<h3>Sample 3 (from <a href="http://tablesorter.com/docs/">tablesorter</a>)</h3>
	Options: distance: 10, minWidth: 60, restoreState: false
	
	<table id="sample3" class="tablesorter"> 
		<thead> 
			<tr> 
				<th>Last Name</th> 
				<th>First Name</th> 
				<th>Email</th> 
				<th>Due</th> 
				<th>Web Site</th> 
			</tr> 
		</thead> 
		<tbody> 
			<tr> 
				<td>Smith</td> 
				<td>John</td> 
				<td>jsmith@gmail.com</td> 
				<td>$50.00</td> 
				<td>http://www.jsmith.com</td> 
			</tr> 
			<tr> 
				<td>Bach</td> 
				<td>Frank</td> 
				<td>fbach@yahoo.com</td> 
				<td>$50.00</td> 
				<td>http://www.frank.com</td> 
			</tr> 
			<tr> 
				<td>Doe</td> 
				<td>Jason</td> 
				<td>jdoe@hotmail.com</td> 
				<td>$100.00</td> 
				<td>http://www.jdoe.com</td> 
			</tr> 
			<tr> 
				<td>Conway</td> 
				<td>Tim</td> 
				<td>tconway@earthlink.net</td> 
				<td>$50.00</td> 
				<td>http://www.timconway.com</td> 
			</tr> 
		</tbody> 
	</table> 
	
	<h3>Sample 4 (from <a href="http://tristen.ca/tablesort/demo/">tablesort</a>)</h3>
	Options: distance: 30, minWidth: 60, restoreState: false, fixed: true
	
	<table id='sample4' class='sort'>
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Birthday</th>
          <th>Grocery item</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Gonzo the Great</td>
          <td>12-2-70</td>
          <td>Radishes</td>
          <td>$0.63</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Ernie</td>
          <td>10/11/69</td>
          <td>Fish</td>
          <td>$12.09</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Bert</td>
          <td>10/11/1969</td>
          <td>Broccoli</td>
          <td>$0.79</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Cookie Monster</td>
          <td>1/09/1966</td>
          <td>Oreo cookies</td>
          <td>$2.78</td>
        </tr>
        <tr>
          <td>5</td>
          <td>Kermit</td>
          <td>12-05-1955</td>
          <td>Granola</td>
          <td>$4.73</td>
        </tr>
        <tr>
          <td>6</td>
          <td>Sam the Eagle</td>
          <td>04/07/75</td>
          <td>Corn dog</td>
          <td>$5.50</td>
        </tr>
      </tbody>
    </table>
	
	<script src='table-drag-sort-resize.js'></script>
	<script>
	  // new TableDragSortResize(document.getElementById('sample1'));
	  // new TableDragSortResize(document.getElementById('sample2'));
	  new TableDragSortResize(document.getElementById('sample3'), {distance: 10, minWidth: 60, restoreState: false});
	  new TableDragSortResize(document.getElementById('sample4'), {distance: 30, minWidth: 60, restoreState: false, fixed: true});
	</script>

</body>
</html>